Skip to content

Fix: Chat UI consistency and layout shifts #5237

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 2 commits into from
Jul 3, 2025
Merged

Fix: Chat UI consistency and layout shifts #5237

merged 2 commits into from
Jul 3, 2025

Conversation

@seedlord
Copy link
Contributor

@seedlord seedlord commented Jun 29, 2025 •
edited by ellipsis-dev bot
Loading

Related GitHub Issue

Closes: #5236

Description

This PR fixes several UI inconsistencies and layout shifting issues in the chat view to create a more stable and polished user experience.

The key problems addressed are:

  • The "Auto-Approve" bar slightly shifting its position depending on the scroll state.
  • Inconsistent spacing between UI elements at the bottom of the chat area.
  • The "Scroll to Bottom" button style not matching other standard buttons.
  • The visibility of buttons on the right edge of task items depends on the shown message size and is not consistent across different message sizes

Test Procedure

  1. In a task with scrollable content, scroll up. Observe that the "Auto-Approve" bar slightly shifts its position depending on the scroll state.
  2. The spacing between various UI elements at the bottom of the chat area (e.g., buttons, input field) is inconsistent.
  3. The "Scroll to Bottom" button has a different style than the other standard buttons in the application.
  4. The buttons on the right edge of task items being hidden too early when viewsize shrinks and initial message of that task is too long/big.

Changes Made

  • webview-ui/src/components/chat/ChatView.tsx:

    • Refactored the logic for the bottom action bar to prevent layout shifts.
    • Standardized the "Scroll to Bottom" button to use <VSCodeButton> with appearance="secondary".
    • Unified margins to prevent elements from jumping.

  • webview-ui/src/components/chat/ChatTextArea.tsx:

    • Adjusted gap and padding for a more consistent and tighter layout.

  • webview-ui/src/components/chat/AutoApproveMenu.tsx:

    • Corrected padding to fix vertical alignment issues.

  • webview-ui/src/components/history/TaskItem.tsx:

    • Add min-w-0 class to TaskItem component for better layout handling.

These changes result in a visually stable and consistent chat interface.

Pre-Submission Checklist

  • Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
  • Scope: My changes are focused on the linked issue (one major feature/fix per PR).
  • Self-Review: I have performed a thorough self-review of my code.
  • Testing: New and/or updated tests have been added to cover my changes (if applicable).
  • Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
  • Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

Documentation Updates

Additional Notes

Get in Touch

Important

Fixes UI inconsistencies and layout shifts in chat interface by standardizing button styles and adjusting spacing in ChatView.tsx, ChatTextArea.tsx, AutoApproveMenu.tsx, and TaskItem.tsx.

  • Behavior:
    • Fixes layout shifts in ChatView.tsx by refactoring bottom action bar logic.
    • Standardizes "Scroll to Bottom" button using <VSCodeButton> with appearance="secondary".
    • Ensures consistent spacing and alignment in ChatTextArea.tsx and AutoApproveMenu.tsx.
  • Layout:
    • Adjusts gap and padding in ChatTextArea.tsx for tighter layout.
    • Corrects padding in AutoApproveMenu.tsx for vertical alignment.
    • Adds min-w-0 class to TaskItem.tsx for better layout handling.
  • Misc:
    • Fixes visibility of buttons on task items in ChatView.tsx based on message size.

This description was created by Ellipsis for 0b82c79. You can customize this summary. It will automatically update as commits are pushed.

@seedlord seedlord changed the title Adjust padding and margin for improved layout in AutoApproveMenu and … Fix: Chat UI consistency and layout shifts Jun 29, 2025
@hannesrudolph hannesrudolph added the Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. label Jun 29, 2025
@seedlord
fix: Add min-w-0 class to TaskItem component for better layout handling
0b82c79 
-fixes the buttons on the right edge of task items being hidden too early when initial message of that task was too long/big
@seedlord seedlord marked this pull request as ready for review June 29, 2025 20:55
@seedlord seedlord requested review from cte, jr and mrubens as code owners June 29, 2025 20:55
@dosubot dosubot bot added size:L This PR changes 100-499 lines, ignoring generated files. UI/UX UI/UX related or focused labels Jun 29, 2025
@daniel-lxs daniel-lxs moved this from Triage to PR [Needs Prelim Review] in Roo Code Roadmap Jun 30, 2025
@hannesrudolph hannesrudolph added PR - Needs Preliminary Review and removed Issue/PR - Triage New issue. Needs quick review to confirm validity and assign labels. labels Jun 30, 2025
@seedlord seedlord mentioned this pull request Jun 30, 2025
Closed
4 tasks
@daniel-lxs
Copy link
Member

daniel-lxs commented Jun 30, 2025

Hey @seedlord, thanks for the contribution!

I didn’t notice anything off with the changes, but could you add some before-and-after screenshots to help visualize the impact a bit better?

Also, did you test the changes across different screen widths? We want to make sure there are no layout overflows on smaller viewports.

Let me know what you think!

@daniel-lxs daniel-lxs moved this from PR [Needs Prelim Review] to PR [Changes Requested] in Roo Code Roadmap Jun 30, 2025
@seedlord
Copy link
Contributor Author

seedlord commented Jul 1, 2025

I use Windows 10 with 2 Monitors 1620p & 1440p
this problem occurs for me in 1080p too and fullscreened and windowed too. See below to see what i mean

  1. The "Auto-Approve" bar slightly shifting its position (when user sends first message into a blank task or if you scroll up in history)
    1

  2. Inconsistent spacing between UI elements at the bottom of the chat area.
    I mean the spacing between mode/profiledropdown and the bottom end of the extension webview. Its not the same as the spacing between mode/profiledropdown and the chatinput field.
    It seems its mirrorred above the chatinput field for the chat buttons. This seems to be ok,

  3. But still the "Scroll to Bottom" button style not matching other standard buttons (different heights leading to slightly shifting "Auto-Approve" bar) making it looks inconsistent....
    2-3

  4. The visibility of buttons on the right edge of task items depends on the shown message size and is not consistent across different message sizes
    4

@daniel-lxs daniel-lxs moved this from PR [Changes Requested] to PR [Needs Prelim Review] in Roo Code Roadmap Jul 1, 2025
daniel-lxs
daniel-lxs approved these changes Jul 1, 2025
View reviewed changes
Copy link
Member

@daniel-lxs daniel-lxs left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you @seedlord!

LGTM

@dosubot dosubot bot added the lgtm This PR has been approved by a maintainer label Jul 1, 2025
@daniel-lxs daniel-lxs moved this from PR [Needs Prelim Review] to PR [Needs Review] in Roo Code Roadmap Jul 1, 2025
@mrubens mrubens merged commit abea192 into RooCodeInc:main Jul 3, 2025
40 checks passed
@github-project-automation github-project-automation bot moved this from PR [Needs Review] to Done in Roo Code Roadmap Jul 3, 2025
@github-project-automation github-project-automation bot moved this from New to Done in Roo Code Roadmap Jul 3, 2025
@seedlord seedlord deleted the feat/chatview-ui-consistency branch July 9, 2025 20:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mrubens mrubens mrubens approved these changes

@daniel-lxs daniel-lxs daniel-lxs approved these changes

@cte cte Awaiting requested review from cte cte is a code owner

@jr jr Awaiting requested review from jr jr is a code owner

Assignees

No one assigned

Labels

lgtm This PR has been approved by a maintainer PR - Needs Review size:L This PR changes 100-499 lines, ignoring generated files. UI/UX UI/UX related or focused

Projects

Roo Code Roadmap
Archived in project

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Inconsistent ChatView elements and layout shifting

4 participants

@seedlord @daniel-lxs @mrubens @hannesrudolph